<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        margin-top: 1px;
      }

      .item {
        height: 60px;
        width: 60px;
        text-align: center;
        line-height: 60px;
        background: #f66;
        color: white;
        font-size: 18px;
      }

      .item.red {
        background: #f66;
      }
      .item.blue {
        background: #66f;
      }
      .item.gray {
        background: #666;
      }
      .item.purple {
        background: #f6f;
      }
      .item.brown {
        background: #9e5b03;
      }

      h3 {
        color: #666;
        margin-top: 10px;
        border-bottom: 1px dashed #dcdcdc;
      }
    </style>
  </head>

  <body>
    <h3>flex-grow</h3>
    <div class="flex-container">
      <div style="flex-grow: 0" class="item blue">0</div>
      <div style="flex-grow: 1" class="item red">1</div>
      <div style="flex-grow: 2" class="item blue">2</div>
      <div style="flex-grow: 3" class="item red">3</div>
      <div style="flex-grow: 4" class="item blue">4</div>
      <div style="flex-grow: 5" class="item red">5</div>
    </div>
    <div class="flex-container">
      <div style="flex-grow: 0" class="item blue">0</div>
      <div style="flex-grow: 1" class="item red">1</div>
      <div style="flex-grow: 0" class="item blue">0</div>
    </div>

    <h3>flex-shrink</h3>
    <div
      class="flex-container"
      style="width: 600px; border: 1px dotted #dcdcdc"
    >
      <div style="flex-shrink: 0; width: 100px" class="item blue">100</div>
      <div style="flex-shrink: 1; width: 100px" class="item red">100</div>
      <div style="flex-shrink: 2; width: 100px" class="item blue">100</div>
    </div>

    <div
      class="flex-container"
      style="width: 600px; border: 1px dotted #dcdcdc"
    >
      <div style="flex-shrink: 0; width: 300px" class="item blue">0</div>
      <div style="flex-shrink: 1; width: 300px" class="item red">1</div>
      <div style="flex-shrink: 1; width: 300px" class="item blue">1</div>
    </div>

    <div
      class="flex-container"
      style="width: 600px; border: 1px dotted #dcdcdc"
    >
      <div style="flex-shrink: 0; width: 300px" class="item blue">0</div>
      <div style="flex-shrink: 1; width: 300px" class="item red">1</div>
      <div style="flex-shrink: 5; width: 300px" class="item blue">5</div>
    </div>
  </body>
</html>
